<template>
	<view class="page">
		<view class="searchBox">
			<view class="inputBox">
				<view class="inputRow" style="" @click="selectShow=true">
					<view class="label">
						<text class="red">*</text>
						{{language.eventRepairForm.label1}}:
					</view>
					<view :class="selectLabel ? 'val' : 'emty'" >
						{{selectLabel  ? selectLabel  : language.eventRepairForm.tip1 }}
					</view>
				</view>
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.eventRepairForm.label2}}:
					</view>
					<view class="val" >
						<uni-datetime-picker type="datetime" v-model="params.startTime" :placeholder="language.eventRepairForm.tip1" />
					</view>
				</view>
				<view class="inputRow" style="" >
					<view class="label">
						<text class="red">*</text>
						{{language.eventRepairForm.label3}}:
					</view>
					<view class="val" >
						<uni-datetime-picker type="datetime" v-model="params.endTime" :placeholder="language.eventRepairForm.tip1" />
					</view>
				</view>
				<view class="inputRow" style="height: 300rpx;">
					<view class="label">
						{{language.eventRepairForm.label5}}:
					</view>
					<view  class="val" style="width: 70%;height: 300rpx;padding-top: 30rpx;" >
						<u--textarea v-model="params.reason" :placeholder="language.eventRepairForm.tip2"  ></u--textarea>
					</view>
				</view>
				
				<view class="applyResult" v-if="applyResults.length">
									<u-steps :current="applyResults.length">
											<u-steps-item :title="item.auditPersonName" :error="item.error" v-for="(item,index) in applyResults" :key="index" :desc="item.resultText">
											</u-steps-item>
									</u-steps>
				</view>
				
				<!-- <view class="inputRow" style="">
					<view class="label">
						{{language.eventRepairForm.label4}}:
					</view>
					<view  class="val" >
						<u-radio-group
						   v-model="params.status"
						   placement="row"
						 >
						   <u-radio
						     :customStyle="{marginLeft: '8px'}"
						     :label="language.eventRepairForm.status1"
						     :name="1"
						    >
						   </u-radio>
							<u-radio
								:customStyle="{marginLeft: '8px'}"
								:label="language.eventRepairForm.status2"
								:name="0"
								>
							</u-radio>
						 </u-radio-group>
					</view>
				</view> -->
			</view>
			
		</view>
		<view class="submitBtn"  @click="handleSubmit" v-if="isDetail==2">
			{{language.eventRepairForm.submit}}
		</view>
	
		<u-datetime-picker
		    :show="startDateShow" ref="datetimePicker" v-model="startDate" 
		    mode="dateTime"  @cancel="startDateShow=false" @confirm="startDateConfirm"
		       ></u-datetime-picker>
		<u-datetime-picker
			:show="endDateShow" ref="datetimePicker" v-model="endDate" 
			mode="dateTime"  @cancel="endDateShow=false" @confirm="endDateConfirm"
	       ></u-datetime-picker>
		<u-picker :show="selectShow" :columns="selectList" keyName="label" @confirm="selectConfirm"
			@cancel="selectShow = false"></u-picker>
	</view>
</template>

<script>
	import {attEventRegAddApi,attEventRegQueryByIdApi} from '@/common/api/commonApi/checking.js'
	export default {
		data() {
			return {
				list:[],
				params:{
					personId: uni.getStorageSync('selectInfoAccount').id,
					status: 1,
					startTime: '',
					endTime: '',
					eventType: '',
				},
				startDate: Number(new Date()),
				endDate: Number(new Date()),
				startDateShow : false,
				endDateShow : false,
				total : 0,
				isAudit: 2,
				isDetail: 2,
				selectList : [
					[
						// {
						// 	label:'学生假',
						// 	value: '51'
						// },
						{
							label:'事假',
							value: '11'
						},
						{
							label:'病假',
							value: '12'
						},
						{
							label:'丧假',
							value: '13'
						},
						{
							label:'产假',
							value: '14'
						},
						{
							label:'换班',
							value: '34'
						},
						{
							label:'陪产假',
							value: '15'
						},
						{
							label:'年假',
							value: '21'
						},
						{
							label:'调休',
							value: '22'
						},
						{
							label:'节假日加班',
							value: '32'
						},
						{
							label:'周末加班',
							value: '33'
						},
						{
							label:'出差',
							value: '41'
						},
						// {
						// 	label:'补登',
						// 	value: '61'
						// },
					]
				],
				selectLabel : '',
				selectShow : false,
				content: '',
				applyResults: [ ],
			}
		},
		components:{
		},
		methods: {
			selectConfirm(e){
				console.log(e);
				this.selectLabel = e.value[0].label
				this.params.eventType = e.value[0].value
				this.selectShow = false
			},
			handleSubmit(){
				if(!this.params.eventType) return this.setMessage('请选择类型名称')
				attEventRegAddApi(this.params).then(res=>{
						this.setMessage('操作成功')
						this.goBack()
				})
			},
			handleDetail(item){
				this.goPage('/pages/componentsC/safe/accessRecordDetail',{id:1})
			},
			scrolltolower(){
				if(this.total == this.list.length){
					return this.setMessage('没有更多了')
				}
				this.params.currPage ++
				this.getList()
			},
			goSearch(){
				if(this.params.startDate && this.params.endDate ){
					if(new Date(this.params.startDate) > new Date(this.params.endDate) ) return this.setMessage('开始时间不能大于结束时间')
				}
				this.params.currPage = 1 
				this.getList()
			},
			startDateConfirm(e){
				let date = this.dateformat(e.value)
				this.params.startTime = date
				console.log(this.params.startTime);
				this.startDateShow = false
			},
			endDateConfirm(e){
				let date = this.dateformat(e.value)
				this.params.endTime = date
				this.endDateShow = false
			},
			goSearch(){
				this.params.currPage = 1
				this.getList()
			},
			getDetail(){
				attEventRegQueryByIdApi({
					id:this.id
				}).then(res=>{
					this.params = res.result
					
					
					this.selectList[0].forEach(item=>{
						if(item.value==res.result.eventType){
							this.selectLabel = item.label
						}
					})
					
					// this.selectLabel = res.result.attTimePeriodId_dictText
					if(res.result.applyResults && res.result.applyResults.length){
						res.result.applyResults.forEach(item=>{
							item.resultText = item.result>0? '已审核': '未审核'
							if(item.result==2){
								item.error = true
								item.resultText = `${item.updateTime}--审核不通过`
							}else{
								item.error = false
								if(item.result==1){
									item.resultText = `${item.updateTime}--审核通过`
								}
							}
						})
						this.applyResults = res.result.applyResults
					}
					console.log(this.params);
				})
			}
		},
		onLoad({id}) {
			this.setPageTitle(this.language.eventRepairForm.title)
			
			if(id){
				this.isDetail = 1
				this.id = id
				this.getDetail()
			}
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #f1f1f1;
	// height: 100vh;
	.searchBox{
		display: flex;
		align-items: center;
		background-color: #fff;
		padding:  20rpx;
		border-bottom: 1px solid #f1f1f1;
		margin: 20rpx;
		border-radius: 8rpx;
		// box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		.inputBox{
			// flex: 1;
			padding-right: 30rpx;
			display: flex;
			flex-wrap: wrap;
			.inputRow{
				width: 100%;
				border-bottom: 1px solid #f1f1f1;
				height: 120rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				padding-left: 20rpx;
				.label{
					color: #191919;
					margin-right: 30rpx;
				}
			}
			.input{
				
			}
			.emty{
				color: #c0c4cc;
			}
			.val{
				flex: 1;
				display: flex;
				align-items: center;
			}
			.text{
				margin: 0 20rpx;
			}
		}
		.btnBox{
			display: flex;
			flex-direction: column;
			padding: 10rpx 0;
			.reset{
				margin-top: 20rpx;
				border: 1px solid #f1f1f1;
				background: #fff !important;
				color: #353535 !important;
			}
			.btn{
				padding: 0 30rpx;
				// width: 110rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #1890ff;
				border-radius: 8rpx;
				color: #fff;
			}
		}
	}
	
	.submitBtn{
		margin: 40rpx;
		// width: 110rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 8rpx;
		color: #fff;
	}
	
	
	.boxItem{
			background-color: #fff;
			margin: 20rpx;
			border-radius: 8rpx;
			padding: 10rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(102,102,102,0.15);
			.row{
				margin: 10rpx;
				display: flex;
				.item{
					width: 50%;
					// flex: 1;
				}
				.label{
					color: #969696;
				}
				.val{
					color: #353535;
					font-size: 32rpx;
				}
				.btn{
						padding: 0 30rpx;
						width: 120rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #1890ff;
						border-radius: 8rpx;
						color: #fff;
				}
			}
		}
		
}
.applyResult{
	width: 100%;
	margin-top: 20rpx;
	display: flex;
	justify-content: center;
}

.red{
	color: #ff4d4d;
}
</style>
